<template>
    <!-- 编辑页面 -->
    <div class="editScreen">
        <!-- 头部 -->
        <div class="editScreen_header">
            <!-- 工具栏 -->
            <div class="toolbar">
                <el-button type="primary" size="mini">新建屏幕</el-button>
                <el-button type="primary" size="mini" @click="preview()">预览</el-button>
                <el-button type="primary" size="mini" @click="release()">发布</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class=" editScreen_middle">
            <!-- 左侧父级工具栏 -->
            <div class="middle_panel" ref="middle_panel">
                <!-- 第一层 -->
                <div class="components">
                    <!-- 屏幕库 -->
                    <el-collapse v-model="activeName" accordion @change="collapse">
                        <el-collapse-item title="屏幕库">
                            <div v-for="item in screenList" class="compItem" draggable="true" :key="item.id" @click.stop="selectScreen(item)">
                                <div class="btn">
                                    <el-button type="text" icon="el-icon-delete" @click.stop="remove(item)"></el-button>
                                    <el-button type="text" icon="el-icon-setting" @click.stop="setConfig(item,screenList)"></el-button>
                                </div>
                                <div>{{item.screenDesc}}</div>
                            </div>
                        </el-collapse-item>
                        <el-collapse-item title="组件库">
                            <div v-for="item in  componentList" class="compItem" draggable="true" @dragstart="dragComponents(item)">

                                {{item}}
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <!-- 左侧子级工具栏 -->
                <div class="components_child" v-if="components_child">
                    <div class="tools">
                        <el-button type="primary" size="mini" @click="createPage">创建页面</el-button>
                        </el-button>
                    </div>
                    <div v-for="item in screenPage" class="compItem" draggable="true" @click.stop="showPage(item)">
                        <div class="btn">
                            <el-button type="text" icon="el-icon-delete" @click.stop="removePage(item)"></el-button>
                            <el-button type="text" icon="el-icon-setting" @click.stop="setPage(item)"></el-button>
                        </div>
                        {{item.pageName}}
                    </div>
                </div>
            </div>
            <!-- 内容区域 -->
            <div class="middle_viewport" ref="middle_viewport">
                <div class="middle_layout" ref="middle_layout">
                    <div class="middle_container" ref="middle_container" @wheel.prevent="zoomDom($event)">
                        <div class="middle_canvas" ref="middle_canvas" @dragleave="allowDrop($event)">
                            <div class="canvas">
                                <vue-draggable-resizable :w="item.attribute.width" :h="item.attribute.height" :x="item.attribute.left" :y="item.attribute.top" @activated="componentsEdit(item,index)" :grid=[20,20] :parent="true" @dragging="onDrag" @resizestop="onResizeStop" v-if="showVdr" v-for="(item,index) in pageComponentsList" :key='item.moduleId'>
                                    <p>组件描述：{{item.moduleName}}</p>
                                    <p>组件：{{item.componentName}}</p>
                                    <div class="componentsEdit" :class="{active:index===selectComponents}">
                                        <el-button type="text" icon="el-icon-delete" @click.stop="removeComponents(item)"></el-button>
                                        <el-button type="text" icon="el-icon-setting" @click.stop="setComponents(item)"></el-button>
                                    </div>
                                </vue-draggable-resizable>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹 -->
        <!-- 窗 -->
        <!-- 区 -->
        <!-- 域 -->
        <el-dialog title="修改屏幕参数" :visible.sync="setConfigVisible" width="600px" center>
            <el-form :model="screenForm">
                <el-form-item label="屏幕名称" label-width="120px">
                    <el-input v-model="screenForm.screenName"></el-input>
                </el-form-item>
                <el-form-item label="屏幕描述" label-width="120px">
                    <el-input v-model="screenForm.screenDesc"></el-input>
                </el-form-item>
                <el-form-item label="屏幕宽度" label-width="120px">
                    <el-input v-model="screenForm.screenWidth"></el-input>
                </el-form-item>
                <el-form-item label="屏幕高度" label-width="120px">
                    <el-input v-model="screenForm.screenHeight"></el-input>
                </el-form-item>
                <el-form-item label="默认显示页面" label-width="120px">
                    <el-select v-model="screenForm.defaultPage" placeholder="请选择">
                        <el-option v-for="item in this.screenPage" :key="item.pageId" :label="item.pageName" :value="item.pageId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium">取 消</el-button>
                <el-button type="primary" size="medium" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 配置组件大小弹窗 -->
        <el-dialog title="修改组件参数" :visible.sync="setComponentsVisible" width="600px" center>
            <el-form :model="setComponemtsForm">
                <el-form-item label="组件宽度" label-width="120px">
                    <el-input v-model.number="setComponemtsForm.width"></el-input>
                </el-form-item>
                <el-form-item label="组件高度" label-width="120px">
                    <el-input v-model.number="setComponemtsForm.height"></el-input>
                </el-form-item>
                <el-form-item label="组件TOP" label-width="120px">
                    <el-input v-model.number="setComponemtsForm.top"></el-input>
                </el-form-item>
                <el-form-item label="组件Left" label-width="120px">
                    <el-input v-model.number="setComponemtsForm.left"></el-input>
                </el-form-item>
                <el-form-item label="组件名称" label-width="120px">
                    <el-input v-model="setComponemtsForm.moduleName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium">取 消</el-button>
                <el-button type="primary" size="medium" @click="submitComponents">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加组件基本配置 -->
        <el-dialog title="组件参数" :visible.sync="setComponentsConfig" width="600px" center>
            <el-form :model=" newComponentsConfig">
                <el-form-item label="组件宽度" label-width="120px">
                    <el-input v-model.number=" newComponentsConfig.width"></el-input>
                </el-form-item>
                <el-form-item label="组件高度" label-width="120px">
                    <el-input v-model.number=" newComponentsConfig.height"></el-input>
                </el-form-item>
                <el-form-item label="组件TOP" label-width="120px">
                    <el-input v-model.number=" newComponentsConfig.top"></el-input>
                </el-form-item>
                <el-form-item label="组件Left" label-width="120px">
                    <el-input v-model.number=" newComponentsConfig.left"></el-input>
                </el-form-item>
                <el-form-item label="组件名称" label-width="120px">
                    <el-input v-model=" newComponentsConfig.moduleName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium">取 消</el-button>
                <el-button type="primary" size="medium" @click="submitNewComponents">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 创建新页面 -->
        <el-dialog title="新页面参数" :visible.sync="createNewPageVisible" width="600px" center>
            <el-form :model="newPageConfigFrom">
                <el-form-item label="组件名称" label-width="120px">
                    <el-input v-model="newPageConfigFrom.pageName"></el-input>
                </el-form-item>
                <el-form-item label="组件描述" label-width="120px">
                    <el-input v-model="newPageConfigFrom.pageDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="createNewPageVisible =false">取 消</el-button>
                <el-button type="primary" size="medium" @click="submitAddNewPage">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { getScreen, getPageList, updataScreen, editPage, deletePage, addPage } from '../../api/HomeApi'
    import Moveable from 'vue-moveable';
    import VueDraggableResizable from 'vue-draggable-resizable'
    import { nanoid } from 'nanoid'
    export default {
        name: 'editScreen',
        data() {
            return {
                selectComponents: -1, //
                selectScreenObj: null, //当前选择的是第几块屏幕
                screenList: [], //屏幕库
                screenPage: [], //页面库
                componentList: [], // 组件数据
                activeName: '',
                components_child: false, //是否显示子级工具栏
                setConfigVisible: false, //修改弹窗
                screenForm: {}, //编辑屏幕表单
                showVdr: false, //显示拖拽
                ctrl: false,
                pageComponentsList: [], // 页面组件库
                componentsEditDOM: false, // 显示组件编辑功能
                currentPage: null, //当前页面 
                setComponentsVisible: false, //修改组件参数
                setComponemtsForm: {}, //编辑组件表单
                dragComponentsVal: null, //拖拽的元素名称
                setComponentsConfig: false, //初始化组件参数
                newComponentsConfig: {}, //新组建参数
                createNewPageVisible: false, // 创建新页面弹窗
                newPageConfigFrom: {}, // 新页面参数对象
            }
        },
        components: {
            Moveable,
            VueDraggableResizable
        },
        mounted() {
            const _this = this
            this.getLocalComponent()
            this.getScrenList() // 获取页面
            // 键盘按下
            document.onkeydown = function(event) {
                _this.ctrl = true
            }
            document.onkeyup = function(event) {
                _this.ctrl = false
            }
        },
        methods: {
            // 获取本地组件
            getLocalComponent() {
                const compontesFiles = require.context('@/components', true, /\.vue$/).keys()
                compontesFiles.forEach(item => {
                    const componentName = item.split('/')[1]
                    this.componentList.push(componentName)
                });
            },
            // 获取系统页面
            getScrenList() {
                getScreen().then((result) => {
                    this.screenList = result.data
                }).catch((err) => {

                });
            },
            // 切换屏幕
            selectScreen(val) {
                this.selectScreenObj = val
                this.components_child = true
                this.$refs.middle_viewport.style.marginLeft = "584px"
                this.$refs.middle_panel.style.width = '584px'
                this.$refs.middle_container.style.width = val.screenWidth + 'px'
                this.$refs.middle_container.style.height = val.screenHeight + 'px'
                this.showVdr = true
                // 获取当前屏幕下有多少页面
                getPageList({ screenId: val.screenId }).then((result) => {
                    this.screenPage = result.data
                }).catch((err) => {

                });
            },
            // 折叠面板展开与关闭
            collapse(val) {
                if (!val) {
                    console.log(val, 'false');
                    this.components_child = false
                    this.$refs.middle_viewport.style.marginLeft = "291px"
                }
            },
            // 显示页面组件
            showPage(val) {
                console.log(val);

                this.currentPage = val // 当前页面


                this.pageComponentsList = val.modules
            },
            //删除
            remove() {
                alert('1')
            },
            //设置配置
            setConfig(val, screenList) {
                console.log(val, this.screenPage);
                this.setConfigVisible = true
                this.screenForm = val
            },
            // 创建页面
            createPage() {
                this.createNewPageVisible = true
                console.log(this.screenPage, '页面', this.selectScreenObj);
                let params = {
                    "reqId": 0,
                    "deviceId": "string",
                    "operation": 0,
                    "data": {
                        "screenId": this.selectScreenObj.screenId,
                        "pageId": "string",
                        "pageName": this.newPageConfigFrom.pageName,
                        "pageDesc": this.newPageConfigFrom.pageDesc,
                        "modules": []
                    }
                }
            },
            submitAddNewPage() {
                let params = {
                    "reqId": 0,
                    "deviceId": "string",
                    "operation": 0,
                    "data": {
                        "screenId": this.selectScreenObj.screenId,
                        "pageId": "string",
                        "pageName": this.newPageConfigFrom.pageName,
                        "pageDesc": this.newPageConfigFrom.pageDesc,
                        "modules": []
                    }
                }
                addPage(params).then((result) => {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                }).catch((err) => {

                });
            },
            // 删除页面
            removePage(val) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        "reqId": 0,
                        "deviceId": "string",
                        "operation": 0,
                        "screenId": val.screenId,
                        "pageId": val.pageId,
                        "moduleId": "string",
                        "actionId": 0,
                        "data": "string"
                    }
                    deletePage(params).then((result) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch((err) => {

                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //配置页面
            setPage(val) {
                console.log(val);
            },
            // 提交数据
            submit() {
                let params = {
                    "reqId": 0,
                    "deviceId": this.screenForm.screenId,
                    "operation": 0,
                    "data": {
                        "screenId": this.screenForm.screenId,
                        "screenName": this.screenForm.screenName,
                        "screenDesc": this.screenForm.screenDesc,
                        "screenHeight": this.screenForm.screenHeight,
                        "screenWidth": this.screenForm.screenWidth,
                        "defaultPage": this.screenForm.defaultPage,
                        "currentPage": this.screenForm.defaultPage,
                        "webMaxDevice": 0,
                        "webSubIp": "string",
                        "webSubUser": "string",
                        "webSubPassword": "string",
                        "webRequestType": 0,
                        "controlMaxDevice": 0,
                        "controlUser": "string",
                        "controlPassword": "string",
                        "controlImei": "string",
                        "controlType": 0,
                        "dataType": 0,
                        "createUid": "string",
                        "createTime": "string"
                    }
                }
                console.log(this.screenForm.defaultPage);
                updataScreen(params).then((result) => {
                    console.log(result);
                    this.setConfigVisible = false
                    this.screenForm = {}
                }).catch((err) => {

                });
            },
            // 鼠标滚轮事件
            onMouseWheel(el) {

            },
            // 放大缩小dom
            zoomDom(obj, event) {
                if (this.ctrl) {
                    let zoom = parseInt(this.$refs.middle_layout.style.zoom, 10) || 100
                    zoom += obj.wheelDelta / 12
                    console.log(zoom);
                    if (zoom > 0) {
                        this.$refs.middle_layout.style.zoom = zoom + "%"
                    }
                } else {
                    let sum = this.$refs.middle_layout.scrollTop
                    if (obj.deltaY > 0) {
                        this.$refs.middle_layout.scrollTop = sum - 100
                    } else {
                        this.$refs.middle_layout.scrollTop = sum + 100
                    }
                }
            },
            // 组件编辑
            componentsEdit(item, index) {
                // this.newComponents = item
                this.selectComponents = index

            }, //
            // 删除指定组件
            removeComponents(item) {
                console.log(item);

                for (let i = 0; i < this.pageComponentsList.length; i++) {
                    const element = this.pageComponentsList[i];

                    if (item.componentName === element.componentName) {
                        this.pageComponentsList.splice(i, 1)
                        i--
                    }
                }

                console.log(this.pageComponentsList);
            },
            // 配置组件
            setComponents(item) {
                this.setComponentsVisible = true
                console.log(item, '配置组件名称', this.pageComponentsList);
                this.setComponemtsForm = item.attribute
                // this.setComponemtsForm.moduleName = item.moduleName
            },
            submitComponents() {
                let params = {
                    "reqId": 0,
                    "deviceId": "string",
                    "operation": 0,
                    "data": {
                        "screenId": this.currentPage.screenId,
                        "pageId": this.currentPage.pageId,
                        "pageName": this.currentPage.pageName,
                        "pageDesc": this.currentPage.pageDesc,
                        "modules": this.pageComponentsList,
                    }
                }
                editPage(params).then((result) => {
                    this.setComponentsVisible = false
                    this.setComponemtsForm = {}
                }).catch((err) => {

                });



            },
            //拖动组件
            dragComponents(val) {
                console.log(val);
                this.dragComponentsVal = val
            },
            // 监听拖拽
            allowDrop(val) {
                console.log('添加组件', val, this.pageComponentsList);
                if (this.pageComponentsList.length !== 0) {
                    for (let i = 0; i < this.pageComponentsList.length; i++) {
                        const el = this.pageComponentsList[i];
                        if (el.componentName === this.dragComponentsVal) {
                            console.log('组件已存在');
                            this.$message({
                                message: '该组件已存在，暂不支持重复组件',
                                type: 'warning'
                            });
                        } else {
                            this.setComponentsConfig = true
                        }
                    }
                } else {
                    this.setComponentsConfig = true
                }
            },
            // 提交
            submitNewComponents() {
                let moduleId = 'module_' + nanoid(8)
                let params = {
                    actions: [],
                    attribute: {
                        width: this.newComponentsConfig.width,
                        height: this.newComponentsConfig.height,
                        top: this.newComponentsConfig.top,
                        left: this.newComponentsConfig.left,
                        msg: 'xx'
                    },
                    componentName: this.dragComponentsVal,
                    controls: [
                        "touchpad"
                    ],
                    dataProps: {

                    },
                    moduleId: moduleId,
                    moduleName: this.newComponentsConfig.moduleName,
                    type: 0,
                }
                this.pageComponentsList.push(params)
                this.setComponentsConfig = false
                console.log(params, '确定参数', this.newComponentsConfig);
            },
            //组件拖动
            onDrag(x, y) {
                console.log(x, y);
                this.pageComponentsList[this.selectComponents].attribute.left = x
                this.pageComponentsList[this.selectComponents].attribute.top = y
            },
            // 调整大小结束
            onResizeStop(x, y, width, height) {
                this.pageComponentsList[this.selectComponents].attribute.width = width
                this.pageComponentsList[this.selectComponents].attribute.height = height
            },
            //预览
            preview() {
                let params = {
                    "reqId": 0,
                    "deviceId": "string",
                    "operation": 0,
                    "data": {
                        "screenId": this.currentPage.screenId,
                        "pageId": this.currentPage.pageId,
                        "pageName": this.currentPage.pageName,
                        "pageDesc": this.currentPage.pageDesc,
                        "modules": this.pageComponentsList
                    }
                }
                console.log(this.pageComponentsList, '预览', params);
            },
            // 发布
            release() {
                let params = {
                    "reqId": 0,
                    "deviceId": "string",
                    "operation": 0,
                    "data": {
                        "screenId": this.currentPage.screenId,
                        "pageId": this.currentPage.pageId,
                        "pageName": this.currentPage.pageName,
                        "pageDesc": this.currentPage.pageDesc,
                        "modules": this.pageComponentsList
                    }
                }
                editPage(params).then((result) => {
                    this.$message({
                        message: '页面发布成功。。。',
                        type: 'success'
                    });
                }).catch((err) => {

                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .editScreen {
        width: 100%;
        height: 100%;
        position: relative;

        /* 头部 */
        .editScreen_header {
            background-color: #E7EAED;
            position: relative;

            .toolbar {
                height: 40px;
                line-height: 40px;
                margin: 0 45px;
            }
        }

        /* 内容区域 */
        .editScreen_middle {
            width: 100%;
            height: calc(100% - 40px);

            // 左侧工具栏
            .middle_panel {
                position: absolute;
                width: 291px;
                height: calc(100% - 40px);
                background-color: #f7f7f7;
                display: flex;

                //父级
                .components {
                    height: 100%;
                    overflow-y: auto;
                    width: 291px;

                    ::v-deep .el-collapse {

                        // background: red;
                        .el-collapse-item__header {
                            padding: 20px;
                        }
                    }
                }

                // 子级工具栏
                .components_child {
                    width: 291px;
                    height: 100%;
                    border-left: 2px solid rgba(136, 136, 136, 0.445);
                    overflow-y: auto;
                    padding: 20px 5px;
                }

                // 公共按钮
                .compItem {
                    padding: 10px;
                    height: 80px;
                    margin: 10px;
                    text-align: center;


                    position: relative;
                    background: #F2F2F2;
                    overflow: visible;
                    box-shadow: 3px 3px 6px #888;
                    z-index: 0;


                    .btn {
                        position: absolute;
                        right: 0;
                        display: none;

                        ::v-deep .el-button {
                            font-size: 18px;
                            padding: 0;
                        }
                    }

                }

                .compItem:hover {
                    cursor: pointer;
                    box-shadow: 3px 3px 6px #888;
                    transition: all .2s;

                    .btn {
                        display: block;
                    }
                }

                .compItem:active {
                    //box-shadow: 3px 3px 6px rgb(92, 192, 100);
                    box-shadow: inset 1px 1px 10px 0px #888;
                }
            }

            // 拖拽区域
            .middle_viewport {
                height: 100%;
                position: relative;
                margin-left: 291px;


                .middle_layout {
                    height: 100%;
                    position: relative;
                    background: url('../../assets/images/view_bg.jpg') repeat;
                    overflow: scroll;

                    .middle_container {
                        padding: 100px;
                        box-sizing: content-box;
                        cursor: default;

                        .middle_canvas {
                            width: 100%;
                            height: 100%;
                            position: relative;
                            overflow: visible;
                            box-shadow: 3px 3px 6px #888;
                            z-index: 0;
                            background-color: #f7f7f7;

                            .canvas {
                                width: 100%;
                                height: 100%;
                                background: linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;


                                .componentsEdit {
                                    display: none;
                                }

                                .active {
                                    display: block;
                                }
                            }
                        }

                    }
                }

            }

        }
    }
</style>